<template>
    <div class='index-wrapper'>
        <div class="topImg">
            <img src="../../../static/img/index/banner@2x.png" alt="">
            <div class="title">
                <h3>排行榜</h3>
            </div>
        </div>
        <div class="tabs flex-space-around">
            <p :class="tabActiveactive==index&&'active'" v-for="(el,index) in tabsArr" 
            @click="clickTabs(index)"
            :key="index">{{el.text}}
            
            </p>
        </div>
        <div class="content-wrap">
            <div class="title-wrap flex-center">
                2019年度   {{tabsArr[tabActiveactive].text.substr(0,4)}}排行榜
            </div>
            <div class="list-wrap">
                <van-list
                    v-model="listLoadingFlag"
                    :finished="listLoadingFinished"
                    finished-text="没有更多了"
                >
                <ul class="list-ul">
                    <li v-for="(item,index) in listData"
                    :key="index" class="flex-space-between flex-align-center">
                        <div class="flex-space-between  left-info over1line">
                            <span class="rankNum flex-center">
                                {{
                                    index>2?index+1:''
                                }}
                            </span>
                            <div class="avatar-wrap"><img v-if="tabActiveactive === 0" :src="item.avatar" alt="" class="avatar-img"></div>
                            <span style="overflow:hidden;">{{tabActiveactive === 0 ? item.realName : tabActiveactive === 1 ? item.teamName : item.village + '('+ item.area + ')'}}</span>
                        </div>
                        <div>
                            <span class="themeColor">{{tabActiveactive === 0 ? item.integral + '分' : tabActiveactive === 1 ? item.integral + '分' : item.count + '人'}} </span>
                        </div>
                    </li>
                </ul>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tabActiveactive:0,
            tabsArr:[
                {id:0,text:'个人积分排行'},
                {id:1,text:'团队积分排行'},
                {id:2,text:'区域注册排名'},
            ],
            listLoadingFlag:false,
            listLoadingFinished:true,
            listData:[],
            initData: {}
        }
    },
    created () {
        this.init()
    },
    methods: {
       async init () {
           let res=await this.$http({
                method:'api.user.ranking'
            })
            this.initData = res.data
            this.clickTabs(0)
       },
       clickTabs (index) {
           this.tabActiveactive=index
           if (index === 0) {
               this.listData = this.initData.userRanking
           } else if (index === 1) {
                this.listData = this.initData.teamRanking
           } else {
                this.listData = this.initData.areaRanking
           }
       }
    },
}
</script>

<style lang='scss' scoped> 
$themeColor:#F65D5D;
.index-wrapper{padding-bottom: 50px;}
.topImg{width:100%;height: 3.38rem;position: relative;
img{width: 100%;height: 100%;}
.title{
    position: absolute;
    left: .42rem;
    top: 1rem;
    color: #fff;
    font-size: 14px;
}
h3{font-size: .7rem;font-weight: bold;margin-bottom: .4rem;}
}
.tabs{background: #F65D5D;color: #fff;font-size: 14px;line-height: .88rem;
p{position: relative;}
.active{font-size: 16px;
&::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: solid 7px #fff;
    border-left: solid 7px transparent;
    border-right: solid 7px transparent;
}
}
}
.title-wrap{margin: .27rem auto ;width: 5.8rem;background: #FFEDF7;border-radius: .3rem;height: .6rem;
color: $themeColor;}
.list-ul{
    padding: 0 .4rem;
    li{
        border-bottom: dashed 1px #EFEFF4;
        padding: .15rem 0;
        font-size: 14px;
        .avatar-wrap{margin: 0 .2rem;}
        .avatar-img{width: .8rem;height: .8rem;border-radius: 50%;}
        .rankNum{font-size: .36rem;color: #999999;font-weight: bold;font-family: PingFang-SC-Bold;
        width: .5rem;height: .62rem;background-repeat: no-repeat;background-size: contain;background-position: center;}
    }
    .left-info{align-items: center;}
    li:nth-of-type(1) .rankNum{
        background-image: url('../../../static/img/index/icon_1@2x.png');
    }
    li:nth-of-type(2) .rankNum{
        background-image: url('../../../static/img/index/icon_2@2x.png');
    }
    li:nth-of-type(3) .rankNum{
        background-image: url('../../../static/img/index/icon_3@2x.png');
    }
}
</style>